<template>
	<view class="spread">
		<view class="head" :style="'background-image: url('+get_img+sys.sys_background+');'">
			<img class="img" :src="user.avatar"></img>
		</view>
		<view class="title">{{user.nickname}}</view>
		<view class="er">
			<img :src="get_img + user.qrcode"></img>
		</view>
		<view class="btn">
			<view>
				<button class="butt" @click="save" :disabled="is_click">保存二维码</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:{},
				get_img:this.$get_img,
				sys:{},
				is_click: false,
		
			}
		},
		onLoad() {
			this.user=uni.getStorageSync("infor")
			this.sys=uni.getStorageSync("sys")
		},
		methods: {
			save(){
				const that = this
				// #ifdef H5
				uni.showModal({
					title: '请截图保存',
				})
				// #endif
				
				// #ifdef MP-WEIXIN
				this.is_click = true
				uni.showLoading({
					title: '加载中'
				});
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success(res) {
						uni.downloadFile({
							url: that.get_img + that.user.qrcode, //仅为示例，并非真实的资源
							success: (res) => {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function(res) {
										console.log('save success', res);
										uni.showToast({
											title: '图片保存成功',
											duration: 2000
										})
										that.is_click = false
										uni.hideLoading();
									}
								});
							}
						});
				
					}
				})
				
				// #endif
				
			}
		}
	}
</script>

<style lang="scss">
	.spread {
		.head {
			background-color: #FA436A;
			height: 100px;
			position: relative;

			.img {
				width: 65px;
				height: 65px;
				border-radius: 50px;
				border: 1px solid #C896A6;
				position: absolute;
				left: 50%;
				bottom: -30px;
				margin-left: -32.5px;
			}
		}

		.title {
			text-align: center;
			padding: 40px 0 30px;
			font-size: 18px;
			font-weight: 600;
		}

		.er {
			text-align: center;

			img {
				width: 180px;
				height: 180px;
				border: 2px solid #F6D7B1;
				padding: 2px;
				margin: 0px 0 25px;
			}
		}

		.btn {
			display: flex;
			font-size: 13px;
			justify-content: center;

			.butt {
				background-color: #FB6471;
				height: 25px;
				line-height: 25px;
				border-radius: 20px;
				width: 140px;
				text-align: center;
				color: #fff;
			}
		}

		.gui {
			color: #9E9E9E;
			font-size: 12px;
			padding: 40px 0 0 75px;
			line-height: 20px;
			text-align: center;
		}
	}
</style>
